<!-- 
  @name: 消息通知
  @date: 2020.3.13
 -->
<template>
	<view class="content">
		<!-- 授权按钮 -->
		<button class="btn-empower" @tap="onGetUserInfo" v-show="!isFocus && canUseGetUserProfile">
			授权获取微信账号信息
		</button>
		<button
			class="btn-empower"
			open-type="getUserInfo"
			@getuserinfo="onGetUserInfo"
			v-show="!isFocus && !canUseGetUserProfile"
		>
			授权获取微信账号信息
		</button>

		<!-- 复制按钮 -->
		<button class="btn-empower" @tap="copyAcc" v-show="isFocus">复制公众账号：AH-AUS32</button>

		<!-- 提示区 -->
		<view class="textview">
			<view class="text">
				<text v-show="!isFocus">请先点击授权按钮，获取微信账号信息。然后</text>
				<text v-show="isFocus">您已成功授权，请继续</text>
				复制
				<text class="str">车用尿素</text>
				微信公众账号，在微信搜索中输入该账号即可搜索到对应的公众号，点击关注。
			</view>
			<view class="text t2">
				关注成功后，请进入公众号内，点击左侧键盘按钮输入“
				<text class="str">绑定</text>
				”，即可接收消息提醒。
			</view>
			<view class="img"><view class="xian"></view></view>
		</view>

		<!-- 其他 -->
		<view class="line" style="margin-top: 86rpx;" @tap="$navigateTo('./setVol')">
			<view class="icon-1"></view>
			<view class="note">余量提醒设置</view>
			<view class="arrow_nav"></view>
		</view>
		<view class="line" style="margin-top: 45rpx;">
			<view class="icon-2"></view>
			<view class="note">加注机故障提醒</view>
		</view>
		<view class="line" style="margin-top: 45rpx;">
			<view class="icon-3"></view>
			<view class="note">车用尿素加注通知</view>
		</view>
		<view class="tip-btm">余量提醒、加注机故障提醒、加注通知均通过微信公众号推送消息。</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isFocus: false, //是否获取了unionId
			canUseGetUserProfile: false
		};
	},
	onLoad() {
		this.getCode();
		if (wx.getUserProfile) {
			this.canUseGetUserProfile = true;
		}
		let isFocus = JSON.parse(this.$store.state.userinfo || '{}').isFocus;
		this.isFocus = isFocus === 1 ? true : false;
	},
	methods: {
		//复制公众账号
		copyAcc() {
			uni.setClipboardData({
				data: 'AH-AUS32',
				success: () => {
					this.$successToast('复制成功');
				}
			});
		},
		//确定授权
		async onGetUserInfo(e) {
			if (this.canUseGetUserProfile) {
				const res = await this.getUserInfo();
				console.log(res);
				var { avatarUrl, gender, nickName } = res.userInfo;
			} else {
				var { avatarUrl, gender, nickName } = e.detail.userInfo;
			}
			this.submit(this.code, avatarUrl, nickName, gender);
		},
		//获取code
		getCode() {
			uni.login({
				provider: 'weixin',
				success: res => {
					this.code = res.code;
				},
				fail: () => {
					uni.hideLoading();
					this.$showToast('提交失败，请重试');
				}
			});
		},
		//传递参数
		submit(code, avatarUrl, nickName, gender) {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			this.$http({
				url: this.$api.userUrl + 'getwxunionid',
				data: {
					code,
					avatarUrl,
					nickName,
					gender
				},
				loading: 0 //上面有loading，所以在此处不显示
			}).then(res => {
				this.isFocus = true;
				let info = JSON.parse(this.$store.state.userinfo);
				info.isFocus = 1; //此时已经将openid及unionid存入数据库
				this.$store.commit('setUserinfo', JSON.stringify(info));
				uni.showModal({
					content:
						'授权成功，请继续复制公众账号，在微信搜索中搜索到公众号后，进行关注操作。'
				});
			}).finally(this.getCode);
		},
		getUserInfo() {
			return new Promise((resolve, reject) => {
				wx.getUserProfile({
					desc: '用于完善会员信息',
					success: res => {
						resolve(res);
					},
					fail: () => {
						uni.hideLoading();
						this.$showToast('提交失败，请重试');
						reject();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $color-white;
}

/* 关注组件 */
.btn-empower {
	width: 690rpx;
	margin: 50rpx 30rpx;
	color: #37b736;
	border: 1rpx solid #37b736;
	background-color: $color-white;
}

/* 提示区 */
.textview {
	margin: 0 66rpx;
	padding-bottom: 80rpx;
	border-bottom: 2rpx dashed #ddd;
	.text {
		width: 100%;
		font-size: 26rpx;
		line-height: 50rpx;
	}
	.text.t2 {
		margin-top: 40rpx;
	}
	.str {
		color: $color-primary;
		font-size: $font-size;
	}
	.img {
		width: 557rpx;
		height: 75rpx;
		margin-top: 40rpx;
		position: relative;
		background-image: url('http://img.etubang.com/group1/M00/00/43/rBCky16zuo2AczNoAAAkZe_EHS4841.png');
		.xian {
			position: absolute;
			top: 0;
			left: -10rpx;
			width: 84rpx;
			height: 76rpx;
			border: 6rpx solid $color-primary;
		}
	}
}

/* 其他 */
.line {
	width: 750rpx;
	padding-left: 45rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.note {
		margin-left: 20rpx;
	}
	.arrow_nav {
		width: 14rpx;
		height: 24rpx;
		margin-left: 17rpx;
	}
	.icon-1 {
		width: 25rpx;
		height: 26rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15rPwWAAeWyAAABz78JOzc084.png');
	}
	.icon-2 {
		width: 25rpx;
		height: 21rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15rP3SAYsugAAAB06j4tqA261.png');
	}
	.icon-3 {
		width: 25rpx;
		height: 22rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/43/rBCky16ztjqAXLw0AAACIqVfjy0376.png');
	}
}
.tip-btm {
	width: 100%;
	margin-top: 37rpx;
	margin-bottom: 50rpx;
	padding-left: 91rpx;
	color: $color-grey;
	font-size: 20rpx;
}
</style>
